<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>一起会议吧</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" href="./css/iconfont/iconfont.css" />
  </head>
  <body>
    <div id="app">
      <!-- TODO：请在下面实现需求 -->
      <!-- 登录/注销窗口 -->
      <div class="login">
        <div class="left-tools">
          <a class="close-btn"></a>
          <a class="shrink-btn"></a>
        </div>
        <h3>登录</h3>
        <p>
          选择用户：<select id="selectUser">
            <option value="1">Tom</option>
          </select>
        </p>
        <p>当前用户为：Tom</p>

        <a class="login-btn">登录</a>
      </div>

      <!-- 右侧显示用户列表窗口按钮 -->
      <button id="show" class="right-btn">
        <span class="iconfont icon-left-arrow"></span>
      </button>

      <!-- 用户列表窗口 -->
      <div class="user-dialog">
        <!-- 用户列表窗口上侧工具栏 -->
        <ul class="tools">
          <li class="tools-left">
            <button>
              <span class="iconfont icon-close"></span>
            </button>
            <button>
              <span class="iconfont icon-dialog"></span>
            </button>
            <button class="active">
              <span class="iconfont icon-list"></span>
            </button>
          </li>
          <li class="tools-right">
            <button class="show-list">
              <span class="iconfont icon-retract"></span>
            </button>
          </li>
        </ul>

        <!-- 用户列表 -->
        <ul class="say-list">
          <li>
            <span class="iconfont icon-microphone"></span>
          </li>
          <li class="line"></li>
          <li>正在讲话：Tom；</li>
        </ul>
        <ul class="user-list">
          <li>
            <img class="header" src="./images/header1.png" />
            <div class="user-name">
              <span class="iconfont icon-user header-icon"></span>
              <span class="iconfont icon-microphone"></span>
              Tom
            </div>
          </li>
          <li>
            <img class="header" src="./images/header2.png" />
            <div class="user-name">
              <span class="iconfont icon-microphone"></span>
              Lily
            </div>
          </li>
        </ul>
      </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
    <script type="text/javascript">
      // TODO：请在下面实现需求
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>
